<template>
  <div class="index-container">
    <!-- 小贴士卡片 -->
    <el-card class="tip-card">
      <h3>🌤️ 今日小贴士</h3>
      <p>{{ tipText }}</p>
    </el-card>

    <!-- 模块入口卡片 -->
    <div class="module-cards">
      <el-card class="module-card" @click="goTo('/management')">
        <el-icon class="module-icon"><Document /></el-icon>
        <h4>巡更计划</h4>
        <p>查看和管理巡更任务</p>
      </el-card>

      <el-card class="module-card" @click="goTo('/aics')">
        <el-icon class="module-icon"><ChatLineSquare /></el-icon>
        <h4>AI客服</h4>
        <p>快速响应业主咨询</p>
      </el-card>

      <el-card class="module-card" @click="goTo('/parking')">
        <el-icon class="module-icon"><Van /></el-icon>
        <h4>车辆管理</h4>
        <p>查看小区停车信息</p>
      </el-card>
    </div>

    <!-- 数据统计卡片 -->
    <div class="stats-cards">
      <el-card class="stat-card">
        <h5>📌 待处理巡更任务</h5>
        <p class="stat-number">{{ patrolTasks }}</p>
      </el-card>

      <el-card class="stat-card">
        <h5>💬 未读消息数</h5>
        <p class="stat-number">{{ unreadMessages }}</p>
      </el-card>

      <el-card class="stat-card">
        <h5>🚗 今日停车记录</h5>
        <p class="stat-number">{{ todayParking }}</p>
      </el-card>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import {ChatLineSquare, Document, Van} from "@element-plus/icons-vue";

export default {
  name: 'Index',
  components: {Van, Document, ChatLineSquare},
  data() {
    return {
      tipText: '加载中...',
      patrolTasks: 0,
      unreadMessages: 0,
      todayParking: 0
    };
  },
  mounted() {
    this.fetchRandomTip();
    this.fetchStats();
  },
  methods: {
    async fetchRandomTip() {
      try {
        const res = await axios.get('http://localhost:9998/ai-customerservice/tip/random');
        this.tipText = res.data || '暂无小贴士';
      } catch (error) {
        this.tipText = '获取小贴士失败';
        console.error(error);
      }
    },
    fetchStats() {
      // 示例数据，你可以替换成真实接口调用
      this.patrolTasks = 5;
      this.unreadMessages = 3;
      this.todayParking = 12;
    },
    goTo(path) {
      this.$router.push(path);
    }
  }
};
</script>

<style scoped>
.index-container {
  padding: 20px;
  background-color: #f9f9f9;
}

.tip-card {
  margin-bottom: 20px;
  padding: 20px;
  font-size: 16px;
  border-left: 5px solid #409EFF;
  background-color: #e6f7ff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.module-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 20px;
}

.module-card {
  flex: 1;
  padding: 20px;
  text-align: center;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.module-icon {
  font-size: 40px;
  color: #409EFF;
  margin-bottom: 10px;
}

.stats-cards {
  display: flex;
  justify-content: space-between;
  gap: 20px;
}

.stat-card {
  flex: 1;
  text-align: center;
  padding: 20px;
}

.stat-number {
  font-size: 24px;
  font-weight: bold;
  color: #409EFF;
}
</style>
